<template>
  <div class="app-container ohn transaction-box">
    <div class="f22 pointer" @click="goBack()"><i class="el-icon-arrow-left" />检测交易单</div>
    <el-form
      ref="detectionCreateForm"
      v-loading="formLoading"
      class="mt36"
      :model="detectionCreateForm"
      status-icon
      :rules="rules"
      label-width="120px"
    >
      <el-form-item :label="'检测名称\nTest Name'" prop="testName">
        <el-input
          v-model="detectionCreateForm.testName"
          placeholder="请输入检测名称"
          clearable
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item :label="'客户名称\nClient'" prop="client">
        <el-input
          v-model="detectionCreateForm.client"
          placeholder="请输入客户名称"
          clearable
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item :label="'联系电话\nTel'" prop="contact">
        <el-input
          v-model.number="detectionCreateForm.contact"
          placeholder="请输入联系电话"
          clearable
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item :label="'客户账户\nAccount'" prop="clientAccount">
        <el-input
          v-model.number="detectionCreateForm.clientAccount"
          placeholder="请输入客户账户"
          clearable
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item :label="'联系销售\nSalesman'" prop="owner">
        <el-input
          v-model="detectionCreateForm.owner"
          placeholder="请输入销售姓名"
          clearable
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item
        :label="'检测描述\nTest Desc'"
      >
        <el-input
          v-model="detectionCreateForm.testDesc"
          type="textarea"
          placeholder="请输入检测描述"
          :max-rows="3"
          maxlength="100"
          show-word-limit
          clearable
          style="width: 320px"
        />
      </el-form-item>

      <el-form-item>
        <div class="">
          <el-button
            type="primary"
            @click="submitForm('detectionCreateForm')"
          >保存</el-button>
          <el-button @click="resetForm('detectionCreateForm')">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>
<script>
import methods from './pub_methods/validate'
export default {
  data() {
    return {
      formLoading: false,
      submitLoading: false,
      loading: false,
      rules: methods.detectionCreateValidate,
      detectionCreateForm: {
        testName: "",
        testDesc: "",
        client: "",
        contact: "",
        clientAccount: "",
        owner: ""
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true
          this.$store
            .dispatch('transaction/saveTestTrade', this.detectionCreateForm)
            .then((res) => {
              const { data, success, errorMessage } = res
              if (success) {
                this.$refs[formName].resetFields()
                this.$message.success(data.msg)
                this.$router.push({
                  path: "/detection/list"
                })
              } else {
                this.$message.error(errorMessage)
              }
            })
            .catch(() => {})
            .finally(() => {
              this.formLoading = false
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    goBack() {
      this.$router.push({
        path: "/detection/list"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.transaction-box {
  .el-form .el-form-item__label {
    background-color: red;
    line-height: 20px !important;
  }
  .el-form-item--medium .el-form-item__label {
    line-height: 20px !important;
  }
  .remark-content {
    font-size: 12px;
    color: #808080;
    line-height: 20px;
  }
}
</style>
